```jsx
import * as hoverCard from "@zag-js/hover-card"
import { normalizeProps, useMachine } from "@zag-js/solid"
import { createMemo, createUniqueId, Show } from "solid-js"
import { Portal } from "solid-js/web"

function Checkbox() {
  const service = useMachine(hoverCard.machine, { id: "1" })

  const api = hoverCard.connect(service, normalizeProps)

  return (
    <>
      <a
        href="https://twitter.com/zag_js"
        target="_blank"
        {...api().getTriggerProps()}
      >
        Twitter
      </a>

      <Show when={api().open}>
        <Portal>
          <div {...api().getPositionerProps()}>
            <div {...api().getContentProps()}>
              <div {...api().getArrowProps()}>
                <div {...api().getArrowTipProps()} />
              </div>
              Twitter Preview
            </div>
          </div>
        </Portal>
      </Show>
    </>
  )
}
```
